<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content="width=device-width">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		html{font-size: 20px;}
		body{overflow:hidden;}
		#banner{width: 25rem;height: 7.8rem;overflow:hidden;}
		#banner ul{width:9999rem;transform:translateX(0px);}
		#banner li{width: 25rem;height: 7.8rem;float:left;line-height: 7.8rem;text-align: center;}
		#wrap{background: #ccc;}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="content">
			<div id="banner">
				<ul>
					<li style="background:yellow">0</li>
					<li style="background:pink">1</li>
					<li style="background:orange">2</li>
					<li style="background:purple">3</li>
					<li style="background:lightblue">4</li>
				</ul>
			</div>
			<ol id="ol1"></ol>
		</div>
	</div>
	<script type="text/javascript">
		window.onload=function(){
			//rem
			document.documentElement.style.fontSize=document.documentElement.clientWidth*20/500+'px';

			let banner=document.getElementById('banner');
			let banner_ul=banner.children[0];

			let banner_left=-banner_ul.children[0].offsetWidth;
			banner_ul.style.transform=`translateX(${banner_left}px)`;
			//前面加一个
			banner_ul.insertBefore(banner_ul.children[banner_ul.children.length-1].cloneNode(true),banner_ul.children[0]);
			
			//后面加一个
			banner_ul.appendChild(banner_ul.children[1].cloneNode(true));

		banner.addEventListener('touchstart',ev=>{
			banner_ul.style.transition='';
			content.style.transition='';

			let startX=ev.targetTouches[0].clientX;
			let dir='';
			let disX=startX-banner_left;

			function fnmove(ev){
				let x=ev.targetTouches[0].clientX;
				banner_left=x-disX;

				banner_ul.style.transform=`translateX(${banner_left}px)`;
			}
			function fnend(){
				let n=Math.round(-banner_left/banner.offsetWidth);
				// console.log(n)
				if(n==0){
					//往回撤，整个ul.children.offsetWidth;
					n=banner_ul.children.length-2;
					// console.log(n)
					banner_ul.style.transform=`translateX(${banner_left-(banner_ul.children.length-2)*banner_ul.children[0].offsetWidth}px)`;

				}else if(n==banner_ul.children.length-1){
					n=1;
					// console.log(n)
					banner_ul.style.transform=`translateX(${banner_left+(banner_ul.children.length-2)*banner_ul.children[0].offsetWidth}px)`;
				}
				banner_left=-n*banner.offsetWidth;
			
				banner_ul.style.transition='0.7s all ease';

				banner_ul.style.transform=`translateX(${banner_left}px)`;

				banner.addEventListener('transitionend',function(){
					// console.log('end')
				},{passive: false})
				banner.removeEventListener('touchmove',fnmove,{passive: false});
				banner.removeEventListener('touchend',fnend,{passive: false});
			}
			banner.addEventListener('touchmove',fnmove,{passive: false});
			banner.addEventListener('touchend',fnend,{passive: false});
		},{passive: false});//{capture:true}
	}
	</script>
</body>
</html>